<template>
    <div id="temp2" >
        <p class="til">图片详情</p>
        <h4 class="title">{{data.title}}</h4>
        <div class="cnt">
            <p>
                <span>{{data.add_time | datafmt('YYYY-MM-DD: HH:mm:ss')}}</span>
                <span>浏览{{data.click}}次</span>
            </p>
            <p class="line"></p>
            <div id="imgs">
                  <!-- 图片预览 -->
                 <div id="temp1" class="box" v-for="(item, index) in imglist" >
                   <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, imglist)">
                 </div>
            </div>
          <!-- 图片详情介绍 -->
            <p v-html="data.content" class="info"></p>
            <!-- 评论组件 -->
            <comment :id="id"></comment>
        </div>
	</div>
</template>
<script>
import commont from "../../common.js";
import comment from "../subcom/comment.vue";
export default {
  data() {
    return {
      id: "",
      data: {},
      imglist: [],
    };
  },
  components: {
    comment,
  },
  created() {
    this.id = this.$route.params.id;
    this.getimginfo();
    this.getimgs();
  },
  methods: {
    getimginfo() {
      var url = commont.temurl + "/api/getimageInfo/" + this.id;
      this.$http.get(url).then(function(res) {
        this.data = res.body.message[0];
      });
    },
    getimgs() {
      var url = commont.temurl + "/api/getthumimages/" + this.id;
      this.$http.get(url).then(function(res) {
        this.imglist = res.body.message;
        this.imglist.forEach(function(v) {
          /* 固定宽高图片会失真，应该按照图片的实际尺寸设置 */
          var img = document.createElement('img');
          img.src = v.src;
         img.onload = function(){ /* 图片加载完成之后再将宽高赋值 */
          v.w = img.width;
          v.h = img.height;
         }
        });
       // console.log(this.imglist);
      });
    }
  }
};
</script>
<style scoped>
  #temp2 {
    margin-top: 40px;
    margin-bottom: 55px;
  }
.cnt {
  padding: 0 10px;
}
.til {
  width: 100%;
}
.title {
  color: #0094ff;
  padding-left: 10px;
}
.til {
  height: 30px;
  font-size: 14px;
  background-color: #ccc;
  text-align: center;
  line-height: 30px;
  color: #0094ff;
}
.line {
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}
#imgs {
  overflow: hidden;
  margin:  0 20px;
}
#temp1 {
    margin-top: 20px;
    margin-bottom: 0px;
}
#imgs .box {
  width: calc(100%/3);
  padding: 10px;
  height: 100px;
  box-sizing: border-box;
  display: inline-block;
}
#imgs img {
  height: 100%;
  width: 100%;
}
.info {
  line-height: 25px;
  text-indent: 2em;
}
</style>